import React, {useEffect, useState} from 'react';
import FunUseEffectOne from "@/components/15- 常用Hooks/08- useEffect/FunUseEffectOne";
import axios from "axios";

const App = () => {
    /**
     * useEffect：
     * 作用：
     *      1. 用于模拟类组件的生命周期钩子函数（componentDidMount、componentDidUpdate、componentWillUnmount）
     * 基本用法：
     *     useEffect(() => {
     *         // 副作用逻辑
     *         return () => {
     *             // 清理逻辑（可选）
     *         };
     *     }, [dependencies]); // 依赖项数组（可选）
     * 依赖项数组:
     *      1. 如果省略依赖项数组，副作用会在每次渲染后执行。
     *      2. 如果依赖项数组为空 []，副作用仅在挂载和卸载时执行。
     *      3. 如果依赖项数组包含值，副作用会在这些值变化时执行。
     * 注意:
     *      1. useEffect 接收的回调函数可以有返回值，返回值只允许是 undefined 或函数。
     *      2. useEffect 接收的函数不允许是 async 函数，因为 async 函数返回的是 Promise 实例
     *      3. useEffect 回调函数中如果返回的是函数代表的是 componentWillUnmount
     *      4. 如果副作用中更新了状态，且状态是依赖项，可能会导致无限循环。例如：
     **/

    let [message, setMessage] = useState(0);
    const getItemFun = async () => {
        const {data} = await axios.get("https://api.github.com/search/repositories?q=r&sort=stars");
        console.log(data);
    }
    useEffect(() => {
        getItemFun();
    }, []);
    return (
        <div>
            <h3>App 父元素</h3>
            <button onClick={() => {
                setMessage(message + 1)
            }}>message ==> {message}</button>
            {message % 2 === 0 && <FunUseEffectOne></FunUseEffectOne>}
        </div>
    );
};

export default App;